<template>
  <div class="item-panel">
    <div class="item-panel-search">
      <input
        type="text"
        class="search-input"
        ref="searchInput"
        placeholder="请输入组件名称 ..."
        :value="searchWord"
        @keyup.enter="handleSearch"
      />
      <el-button
        class="search-btn"
        icon="el-icon-search"
        @click="handleSearch"
      ></el-button>
    </div>
    <div class="item-panel-body">
      <item-panel-list
        v-for="(itemList, index) in itemLists"
        :key="index"
        :items="itemList"
      ></item-panel-list>
    </div>
  </div>
</template>

<script>
import ItemPanelList from "./item-panel-list.vue";
import itemLists from "./items";

import "./index.less";

export default {
  name: "item-panel",
  components: {
    ItemPanelList,
  },
  data() {
    return {
      searchWord: "",
      itemLists: itemLists,
    };
  },
  methods: {
    handleSearch() {
      const newVal = this.$refs.searchInput.value;
      if (this.searchWord !== newVal) {
        this.searchWord = newVal;
      }
    },
  },
};
</script>
